@import "_variables";
@import "_colors";

/* responsiveness mixins */

// phones
@mixin mobile {
    @media (max-width: #{$mobile-width}) {
        @content;
    }
}

// anything above phone resolution (e.g. tablet/laptop/desktop)
@mixin large {
    @media (min-width: #{$mobile-width}) {
        @content;
    }
}

// everything matching the ideal dimensions for the component
@mixin componentIdeal( $width, $height ) {
    @media screen and ( min-width: $width ) and ( min-height: $height ) {
        @content;
    }
}
// everything below the ideal dimensions for the component
@mixin componentFallback( $width, $height ) {
    @media screen and ( max-width: $width ), ( max-height: $height ) {
        @content;
    }
}

// components (such as modal windows) that have an ideal width x height size
// can specify styles at the cutoff points using the following mixins:

// everything matching the ideal width for the component
@mixin minWidth( $width ) {
    @media screen and ( min-width: $width ) {
        @content;
    }
}

// everything below the ideal width for the component
@mixin minWidthFallback( $width ) {
    @media screen and ( max-width: $width ) {
        @content;
    }
}

// everything matching the ideal width for the component
@mixin minHeight( $height ) {
    @media screen and ( min-height: $height ) {
        @content;
    }
}

// everything below the ideal width for the component
@mixin minHeightFallback( $height ) {
    @media screen and ( max-height: $height ) {
        @content;
    }
}

/* generic styles */

@mixin truncate() {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@mixin verticalScrollOnMobile() {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden; /* we should never want this in modal windows */
}

@mixin animate($property: all, $delay: .5s) {
    transition: $property $delay cubic-bezier(0.455, 0.030, 0.515, 0.955);
}

@mixin button( $primary: true ) {
    cursor: pointer;
    padding: $spacing-small $spacing-medium;
    border-radius: $spacing-small;
    border: none;
    color: #FFF;
    font-weight: bold;
    user-select: none;

    @if ( $primary ) {
        background-color: $color-4;
    } @else {
        background-color: $color-1;

        &:hover {
            color: $color-1 !important;
        }
    }

    &:hover {
        background-color: #FFF;
        color: $color-4;
    }

    &:disabled {
        cursor: default;
        background-color: dimgrey !important;
        color: linen !important;
    }
}

@mixin smallButton( $fontSize: 1em, $padding: $spacing-xsmall ( $spacing-medium - $spacing-small )) {
    cursor: pointer;
    border-radius: $spacing-xsmall;
    background-color: transparent;
    border: 2px solid $color-2;
    color: $color-1;
    font-size: $fontSize;
    padding: $padding;
    vertical-align: middle;
    margin-left: $spacing-xsmall;

    &:hover {
        background-color: $color-1;
        color: $color-2;
    }

    &:disabled {
        cursor: initial !important;
        color: $color-2 !important;
        border-color: $color-2 !important;
        background-color: transparent !important;
    }
}